<template>
    <div class="totle">
        <ul>
            <li width="100%" v-for="(item, index) in Lunbotu" :key="index" :class="num == index ? 'active' : ''">
                <img class="one_img" width="100%" :src="item.imageUrl" />
            </li>
        </ul>
        <div class="btn banxin">
            <div class="tanxin ban">
                <div class="left">
                    <ul>
                        <li width="900px" height="284px" v-for="(item, index) in Lunbotu" :key="index"
                            :class="num == index ? 'active' : ''">
                            <a href="#">
                                <img  :src="item.imageUrl" class="haha" />
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="download">
                    <a href="#" class="download_btn">下载客户端</a>
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                    <span class="shadow"></span>
                    <span class="shadowr"></span>
                </div>
            </div>
            <input type="button" class="btn1 btn_one" value="<" @click="add()" />
            <input type="button" class="btn1 btn_two" value=">" @click="cut()" />
        </div>
    </div>
</template>

<script>
import { BannerApi } from "@/request/api";
export default {
    data() {
        return {
            Lunbotu: [],
            num: 7,
            time: "",
        };
    },
    methods: {
        cut() {
            if (this.num >= 0 && this.num <= 7) {
                this.num--;
                console.log(this.num--);
            } else if ((this.num = -1)) {
                this.num = 7;
            }
        },
        add() {
            if (this.num >= 0 && this.num <= 7) {
                this.num++;
                console.log(this.num++);
            } else if ((this.num = 8)) {
                this.num = 0;
            }
        },
    },

    created() {
        BannerApi().then((res) => {
            console.log(res.data.banners);
            let Lunbotu = res.data.banners;
            this.Lunbotu = Lunbotu;
            setInterval(() => {
                if (this.num > 0) {
                    this.num--;
                } else if (this.num == 0) {
                    this.num = 7;
                }
            }, 3000);
        });
    },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";

.totle {
    width: 100%;
    overflow: hidden;

    ul {
        position: relative;

        li {
            width: 100%;
            margin-left: -40px;
            position: absolute;

            .one_img {
                height: 285px;
                width: 1000%;
                filter: blur(60px);
            }
        }
    }
}

.btn {
    position: relative;
    z-index: 11;

    .ban {
        width: 982px;
        height: 285px;
        margin: 0 auto;
    }

    input {
        position: absolute;
        width: 40px;
        height: 70px;
        font-size: 40px;
        color: #fff;
        background-color: rgba(173, 171, 171, 0.1);
        border: none;
        cursor: pointer;
        font-family: "黑体";
    }

    .btn_one {
        top: 50%;
        left: 0;
        transform: translateY(-40px);
    }

    .btn_two {
        top: 50%;
        right: 0;
        transform: translateY(-40px);
    }

    input:hover {
        background-color: rgba(70, 69, 69, 0.4);
    }
}

.left {
    width: 745px;
    position: relative;

    ul {
        position: absolute;

        li {
            margin-left: 2px;
            position: absolute;
            transform: translateY(0px);
        }
    }
}

.active {
    z-index: 9;
    animation: donghua 2s linear;
}

.download {
    /* position: absolute; */
    top: 0;
    z-index: 20;
    right: -1px;
    width: 254px;
    height: 285px;
    background: url(https://s2.music.126.net/style/web2/img/index/download.png?c0b82edc744fd585031c774c15782682) no-repeat 0 0;

    .download_btn {
        display: block;
        width: 215px;
        height: 56px;
        margin: 186px 0 0 19px;
        background-position: 0 9999px;
        text-indent: -9999px;
    }

    p {
        font-size: 12px;
        margin: 10px auto;
        text-align: center;
        color: #8d8d8d;
    }

}
.haha{
   width: 730px;
   height: 300px;
}
</style>